<script setup >

async function goDetail(id) {
  await navigateTo({
    path: `/transactions/results-detail`,
    query: {
      id: id,    
    }
  })
}
/*=======行业分类开始 =====*/
// 默认选中 行业所有
const checkIndustryAll  = ref(true)
const checkedIndustry  = ref(new Set())
function onChangeIndustryAll (val) {
  console.log(val)
  if(!val && checkedIndustry.value.size === 0) return
  checkIndustryAll.value = val;
  if(val) {
    checkedIndustry.value.clear()
  }
}
function onChangeIndustry(val,industry) {
  console.log({val,industry})
  // 如果存在 则移除
  if(checkedIndustry.value.has(industry.value)) {
    checkedIndustry.value.delete(industry.value)
  } else {
    checkedIndustry.value.add(industry.value)
  }
  checkIndustryAll.value = checkedIndustry.value.size === 0;
}
// 行业分类字典
const industryDict = reactive([
  {
    label: '电子信息技术',
    value: '1',
  },
  {
    label: '生物与新医药技术',
    value: '2',
  },
  {
    label: '航空航天技术',
    value: '3',
  },
  {
    label: '新材料技术',
    value: '4',
  },
  {
    label: '化学与工程技术',
    value: '5',
  }
])
/*=======行业分类结束 =====*/

const temp = [
  {
    no: "AB1234",
    name:'项目111',
    state: 0,
    timeline:'2022-01-01',
  }
]
for (let i = 0; i < 10; i++) {
  temp.push({
    no: "AB1234",
    name:'项目'+i,
    state: 0,
    timeline:'2022-01-01',
  })
}
const tableData = ref(temp)

const  pageInfo = reactive({
  pageNo: 1,
  pageSize: 10
})
watch(() =>pageInfo.pageSize,(value,oldValue) =>{
  console.log('watch', value,oldValue)
  getData()
})
watch(() =>pageInfo.pageNo,(value,oldValue) =>{
  console.log('watch', value,oldValue)
  // getData()
})
function getData() {

}
function rowClick(row) {
  goDetail(row.index)
}
function tableRowClassName({row, rowIndex}) {
  row.index = rowIndex + 1;
  return ''
}
definePageMeta({
  // keepalive: true, //设置为keepAlive
  key: 'transactions-results'
})
onActivated(() => {
  console.log('activated 刷新数据')
})
</script>

<template>
  <div class="filter">
    <ul>
      <li class="mb-10px">
        <div class="flex items-center">
          <div class="left">行业分类：</div>
          <div class="right">
            <el-check-tag  class="mx-15px" :checked="checkIndustryAll" color="##7f0102" type="primary" @change="onChangeIndustryAll">
              全部
            </el-check-tag>
            <el-check-tag
              v-for="item in industryDict"
              :checked="checkedIndustry.has(item.value)"
              :type="checkedIndustry.has(item.value) ? 'primary' : 'info'"
              class="mr-15px"
              @change="onChangeIndustry($event,item)">
              {{item.label}}
            </el-check-tag>
          </div>
        </div>
      </li>
      <li class="mb-10px">
        <div class="flex items-center">
          <div class="left">战略性新型产业分类：</div>
          <div class="right">
            <el-check-tag  class="mx-15px" :checked="checkIndustryAll" color="##7f0102" type="primary" @change="onChangeIndustryAll">
              全部
            </el-check-tag>

          </div>
        </div>
      </li>
      <li class="mb-10px">
        <div class="flex items-center">
          <div class="left">合作方式：</div>
          <div class="right">
            <el-check-tag  class="mx-15px" :checked="checkIndustryAll" color="##7f0102" type="primary" @change="onChangeIndustryAll">
              全部
            </el-check-tag>

          </div>
        </div>
      </li>
      <li class="mb-10px">
        <div class="flex items-center">
          <div class="left">项目开发阶段：</div>
          <div class="right">
            <el-check-tag  class="mx-15px" :checked="checkIndustryAll" color="##7f0102" type="primary" @change="onChangeIndustryAll">
              全部
            </el-check-tag>

          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="list bg-#fff rounded-20px overflow-hidden p-20px">
    <el-table
      :data="tableData"
      stripe
      header-row-class-name="table-header"
      header-cell-class-name="table-cell"
      @row-click="rowClick"
      :row-class-name="tableRowClassName"
      :header-row-style="{backgroundColor: '#fff8f8'}"
      style="width: 100%"  max-height="550">
      <el-table-column prop="no" align="center" label="项目编号"  />
      <el-table-column prop="name" align="center" label="项目名称" />
      <el-table-column prop="state" align="center" label="项目状态" />
      <el-table-column prop="timeline" align="center" label="挂牌截止时间" />
    </el-table>
    <div class="flex justify-center mt-40px">
      <el-pagination
        v-model:current-page="pageInfo.pageNo"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 15]"
        @current-change="(pageNo) => {
          pageInfo.pageNo = pageNo
        }"
        @size-change="(pageSize) => {
          pageInfo.pageSize = pageSize
        }"
        background layout="sizes,prev,pager, next" :total="1000" />
    </div>
  </div>
</template>

<style  lang="scss">
//.el-table__header {
//  thead { 
//    background: #fff8f8!important;
//  }
//}
.table-header {
  th,tr {
    background: #fff8f8!important;
    color: #333333;
  }
}
.filter {
  background: #ffffff;
  border-radius: 20px;
  padding: 10px 20px;
  margin-bottom: 20px;
  overflow: hidden;
  .el-check-tag {
    background: #fff7f7;
    color: #7F0102;
    &.is-checked {
      color: #ffffff!important;
      background: #7F0102!important;
    }
  }

}
</style>